<template>
    <div class="container">
        <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3303251_y1zek936fo.css"/>
        <div class="wrapperBox" v-for="n in 18" key="n">
            <img src="./images/dance.jpg" alt="">
            <div class="title">
               <i class="iconfont icon-FLAG"></i>Pink Venom
            </div>
            <div class="interact">
                <div class="look">725人浏览</div>
                <div class="star">
                    <span><i class="iconfont icon-dianzan"></i> 8</span>
                    <span><i class="iconfont icon-xiaoxi"></i> 0</span>
                    <span><i class="iconfont icon-star-fill"></i> 16</span>
                </div>
            </div>
            <div class="self">
                <div class="nick">
                    <svg class="icon" aria-hidden="true">
                     <use xlink:href="#icon-icon-test"></use>
                </svg>
                <span>辉</span>
                </div>
                <div>
                    <span>08-26</span>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">

</script>

<style lang="less" scoped>
    
.container{
    flex-wrap: wrap;
    display:flex;
    flex:1;
    .wrapperBox{
        flex-direction:column;
        display: flex;
        margin:5px;
        height:260px;
        width:224px;
        background-color: aqua;
        border-radius: 5px;
        img{
            height: 125px;
            width:224px;
            border-radius:5px;
        }
        .title{
            padding: 10px;
        }
        .interact{
            padding-left:15px;
            border-bottom: 1px solid #fff;
            padding-bottom: 5px;
            .star{
                display: flex;
                justify-content: space-between;
                width:120px;
             
            }
        }
        .self{
            padding-top: 5px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            .nick{
                display: flex;
                align-items: center;
                span{
                    margin-left: 5px;
                }
            }
        }
    }   
}

</style>